@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}

.page08{
    position:relative;
    overflow: hidden;
    .page08-mother-speech01{
        img{
            @extend .position-margin;
            top:35px;
            opacity: 0;
            
        }
    }
    .content-border{
        @extend .position-margin;
        width:100px;
        height:400px;  
        .page08-btn{
            @extend .position-margin;
//          bottom:-30px;
            bottom:-100%;
            left:-40px;

        }    
        .page08-daughter{
            @extend .position-margin;
            bottom:-30px;
//          left:-110px;
            left:300%;
            opacity: 0;
        }
        .page08-son{
            @extend .position-margin;
            bottom:-50px;
//          left:140px;
            left:-300%;
            opacity: 0;
        }  
    }
}






.page08.active{
    .page08-mother-speech01{
        img{
            animation: page08-mother-speech01 1.3s ease 300ms forwards;           
        }
    }
    .content-border{
        .page08-btn{
            animation: page08-btn 800ms ease 1.3s forwards;
        }    
        .page08-daughter{
            animation: page08-daughter 800ms ease 1.8s forwards;
        }
        .page08-son{
            animation: page08-son 800ms ease 1.8s forwards;
        }  
    }
}

//page08-mother-speech01
@keyframes page08-mother-speech01{
    from{transform: scale(0.6);opacity: 0;}to{transform: scale(1); opacity: 1;}
}
//page08-mother-speech01

//page08-daughter
@keyframes page08-daughter{
    0%{opacity: 1;}
    33%{left:-130px;opacity: 1;}
    66%{left:-100px;opacity: 1;}
    100%{left:-110px;opacity: 1;}
}
//page08-daughter

//page08-son
@keyframes page08-son{
    0%{opacity: 1;}
    33%{left:160px;opacity: 1;}
    66%{left:130px;opacity: 1;}
    100%{left:140px;opacity: 1;}
}
//page08-son

//page08-btn
@keyframes page08-btn{
    0%{opacity: 1;}
    20%{bottom:-10px;opacity: 1;}
    66%{bottom:-40px;opacity: 1;}
    100%{bottom:-30px;opacity: 1;}
}
//page08-btn